<template>
  <view class="good-item">
    <!-- 左侧 -->
    <view class="good-item-left">
      <radio v-show="isShowRadio" :checked="good.goods_state" style="transform: scale(90%);" @click="clickRadioHandler">
      </radio>
      <image class="good-logo" :src="good.goods_small_logo || defaultPic" mode=""></image>
    </view>

    <!-- 右侧 -->
    <view class="good-item-right">
      <!--商品名称  -->
      <view class="good-name">
        {{good.goods_name}}
      </view>
      <!-- 商品价格,数量 -->
      <view class="price-count">
        <view class="good-price">
          {{ Number(good.goods_price).toFixed(2)}}
        </view>
        <uni-number-box v-show="isShowNumberBox" class="num-box" :min="1" :value="good.goods_count" background="#cccac0"
          @change="changeValue" />
      </view>
    </view>
  </view>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    name: "my-goods",
    props: {
      good: {
        type: Object,
        default: {}
      },
      isShowRadio: {
        type: Boolean,
        default: false
      },
      isShowNumberBox: {
        type: Boolean,
        default: false
      }
    },
    computed:{
      ...mapGetters('m_cart',['addedCount']),
    },
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    methods: {
      //单选按钮的点击事件回调
      clickRadioHandler() {
        this.$emit('radioClick', {
          goods_id: this.good.goods_id,
          goods_state: !this.good.goods_state
        });
      },
      
      //numberbox的value值发生变化的事件回调
      changeValue(value) {
        this.$emit('num-box-change',{goods_id:this.good.goods_id,value:+value})
      }
    },
    
    
  }
</script>

<style lang="scss">
  .good-item {
    display: flex;
    padding: 13px 5px;
    border-bottom: 1px solid #9f9fa0;

    // 左侧logo样式
    .good-item-left {
      display: flex;
      align-items: center;

      .good-logo {
        width: 220rpx;
        height: 220rpx;
      }
    }

    //右侧
    .good-item-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      margin-left: 10px;

      //商品名称
      .good-name {
        font-size: 26rpx;
      }

      .price-count {
        width: 100%;
        display: flex;
        justify-content: space-between;

        //商品价格
        .good-price {
          font-size: 38rpx;
          color: #c00000;
        }

        .num-box {}

      }
    }
  }
</style>